<html lang="cn">

<head>
  <meta charset="UTF-8">
  <script src="./rem.js"></script>
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="./common.css">
  <link rel="stylesheet" href="./activities.css">
  <script>
    function rembig(){
      setRemSize()
      window.addEventListener("resize",setRemSize,false)
      function setRemSize(){
        var width = document.documentElement.clientWidth
        if (width > 750) {
            width = 750
        }
        var _clientWidth = width / 7.5+'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()
  </script>
</head>

<body>
  <form class="content">
    <div class="topImage">
      <img src="./images/bmy_banner_img.png">
      <!-- <p class="tradeName">美妆护理珠宝行业</p> -->
      <button type="button" class="bannerBtn">参加活动</button>
    </div>
    <div class="fengexian"></div>
    <ul class="firstNeedInput needInputGroup">
      <div class="title">品牌详情</div>
      <li>
        <div class="label"><span>公司名称</span></div>
        <input type="text" value="" name="corporateName" placeholder="请输入公司名称" >
      </li>
      <li>
        <div class="label"><span>品牌名称</span></div>
        <input type="text"  value="" name="brandName" placeholder="请输入品牌名称">
      </li>
      <li>
        <div class="label"><span>公司地址</span></div>
        <input type="text"  value="" name="companyAddress" placeholder="请输入验证码">
      </li>
      <li>
        <div class="label"><span>官方网站</span></div>
        <input type="text"  value="" name="officialWebsite" placeholder="请输入验证码">
        <div class="error">
          <img src="./images/报名活动页_slices/组 551@2x.png">
          网址有误
        </div>
      </li>  
    </ul>
    <div class="fengexian"></div>
    <div class="secondNeedInput needFileGroup">
      <div class="title">
        上传证件
        <div class="remarks">(上传图片大小请控制在5M以内）</div>
      </div>
      <div class="needFile">
        <div class="mark">
          <img src="./images/加载中.gif">
        </div>
        <div class="uploadFail">
          <img src="./images/报名活动页_slices/组 551@2x.png">
          <button type="button" class="uploadFailButton0">上传</button>
        </div>
        <img class="deleteCurrentImage deleteCurrentImage0" src="./images/意见反馈/delete.png">
        <label>
          <img class="showImage" />
          <div class="slotClass">
            <img src="./images/报名活动页_slices/组 535@2x.png">
            品牌logo
          </div>
          <input class="fileClass" type="file" id="img0" />
        </label>
      </div>
      <div class="needFile">
        <div class="mark">上传中</div>
        <label>
          <img class="showImage" />
          <div class="slotClass">
            <img src="./images/报名活动页_slices/组 535@2x.png">
            营业执照
          </div>
          <input class="fileClass" type="file" id="img1"/>
        </label>
      </div>
      <div class="needFile">
        <div class="mark">上传中</div>
        <label>
          <img class="showImage" />
          <div class="slotClass">
            <img src="./images/报名活动页_slices/组 535@2x.png">
            <div class="label" style="width:auto"><span>品牌logo</span></div>
          </div>
          <input class="fileClass" type="file" id="img2" />
        </label>
      </div>
      <div class="needFile">
        <div class="mark">上传中</div>
        <label>
          <img class="showImage" />
          <div class="slotClass">
            <img src="./images/报名活动页_slices/组 535@2x.png">
            品牌logo
          </div>
          <input class="fileClass" type="file" id="img3" />
        </label>
      </div>
      <div class="needFile">
        <div class="mark">上传中</div>
        <label>
          <img class="showImage" />
          <div class="slotClass">
            <img src="./images/报名活动页_slices/组 535@2x.png">
            品牌logo
          </div>
          <input class="fileClass" type="file" id="img4" />
        </label>
      </div>
      <div class="needFile">
        <div class="mark">上传中</div>
        <label>
          <img class="showImage" />
          <div class="slotClass">
            <img src="./images/报名活动页_slices/组 535@2x.png">
            品牌logo
          </div>
          <input class="fileClass" type="file" id="img5" />
        </label>
      </div>
      <div class="error" style="width:100%">
        <img src="./images/报名活动页_slices/组 551@2x.png" alt="" srcset="">
        商标注册不正确，请重新输入
      </div>
    </div>
    <div class="fengexian"></div>
    <ul class="thirdNeedInput needInputGroup">
      <div class="title">身份验证</div>
      <li>
        <div class="label"><span>手机号</span></div>
        <input type="text" value="" name="phone" placeholder="请填写手机号">
      </li>
      <li>
        <div class="label"><span>验证码</span></div>
        <input type="text" value="" name="code" placeholder="请输入验证码">
        <div class="code">
          <a><img src="" alt="" srcset=""></a>
          看不清，换一张
        </div>
      </li>
      <li>
        <div class="label"><span>短信验证码</span></div>
        <input type="text" value="" name="smsCode" placeholder="请输入短信验证码">
        <div class="getCode">获取验证码</div>
      </li>
    </ul>
    <div class="submit">
      <a href="tel:114">
        <button type="button">
          <img src="http://m.10pinpaiwang.com/skin/default/enroll/images/chat.png" style="width: 0.4rem;height: 0.33rem;vertical-align: middle">
          客服
        </button>
      </a>
      <button type="button" class="buttonSubmit">提交反馈</button>
    </div>
  </form>
  <div class="fengexian"></div>
  <!-- <embed src="./images/logo_icon.svg"
    class="logo"
    type="image/svg+xml" /> -->
  <div class="bottomInfo">
    <img src="./images/zxpp_logo.png" class="logo">
    <div style="color: rgba(156,156,156,1)">客服电话：400-159-0958</div>
    <div class="feedback"><span>意见反馈</span> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span>推荐参与活动</span></div>
    <div>中企品牌网</div>
  </div>
  <div style="height: 0.98rem;"></div>
  <div class="bottomTab">
    <div class="tab tab1">
      <img src="./images/home_btn_icon@2x.png" alt="" srcset="">
      <p>首页</p>
    </div>
    <div class="tab tab2" style="border-left:1px solid #D3141C">
      <img src="./images/back_btn_icon@2x.png" alt="" srcset="">
      <p>返回投票</p>
    </div>
  </div>
  <div class="toast">
    信息填写不完整，请检查并修改
  </div>
</body>
</html>

<script>

  var activitiesInit = {
    getCode: function () {
      var timer, z
      $('.getCode').click(function () {
        if (z) return
        console.log('???')
        z = 60
        timer = setInterval(() => {
          z--
          $('.getCode').text(z + 's')
          if (!z) {
            z = 0
            $('.getCode').text('获取验证码')
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    submit: function () {
      var needFiles = $('.needFile')
      var showImages = $('.showImage')
      for (var i = 0; i < 6; i++) {
        (function (i) {
          $('#img' + i).change(function () {
            var file = this.files[0]
            if (window.FileReader) {
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onloadend = function (e) {
                $($(needFiles[i]).children()[0]).css('display', 'flex')
                console.log(e, i, file)
                // $($(needFiles[i]).children()[0 1 2])
                // mark 0
                // uploadFail 1
                // img 2 成功时显示的 X
                // slotClass文字提示 (3 中的 children 1)
                // 上传失败时
                // $($(needFiles[i]).children()[0]).css('display', 'none')
                // $($(needFiles[i]).children()[1]).css('display', 'flex')
                // $($($(needFiles[i]).children()[3]).children()[1]).css('display', 'none')
                // 上传成功时
                $($(needFiles[i]).children()[0]).css('display', 'none')
                $($(needFiles[i]).children()[2]).css('display', 'block')
                $(showImages[i]).attr('src', e.target.result)
                // var params = new FormData()
                // params.append('file',oFiles[0])
              }
            }
          })
          $('.uploadFailButton' + i).click(function () {
            document.getElementById('img' + i).click()
          })
          $('.deleteCurrentImage' + i).click(function () {
            $(showImages[i]).removeAttr('src', '')
            $(showImages[i]).css('display', 'none')
            $(this).css('display', 'none')
          })
        })(i)
      }
      $('.buttonSubmit').click(function () {
        var t = $('form').serializeArray()
        console.log(t)
      })
    },
    toast: function () {
      $('.buttonSubmit').click(function () {
        $('.toast').css('display', 'flex')
      })
    }
  }
  $(document).ready(function () {
    for (var i in activitiesInit) {
      activitiesInit[i]()
    }
  })
</script>
